<template>
  <div class="macaroniExplain">
    <x-header title="权益说明" :left-options="{backText:''}" class='whiteHeader'></x-header>
    <div class="macaroniExplainHeader">
    	<div class="explainPrivilege" @click="changeone">
    		<p :class="{red1:red1}">会员特权</p>
    		<div :class="{line1:isRed1}"></div>
    	</div>
    	<div class="explainExperience" @click="changetwo">
    		<p :class="{red2:red2}">经验值</p>
    		<div :class="{line2:isRed2}"></div>
    	</div>
    	<div class="explainIntroduce" @click="changethree">
    		<p :class="{red3:red3}">通币介绍</p>
    		<div :class="{line3:isRed3}"></div>
    	</div>
    </div>
    <!--会员特权-->
    <div v-if="red1" class="explainOne">
    	<div class="explainOne1">
    		<div class="explainOneTitle1">
    			<p>会员特价</p>
	    	</div>
	    	<div class="explainOneContent1">
	    		<p>铜牌以上会员可在指定页面,享有优惠价商品。</p>
	    		<p>铜牌会员可享铜牌会员价商品。</p>
	    		<p>银牌会员可享铜牌以及银牌会员价商品。</p>
	    		<p>金牌会员可享铜牌、银牌、金牌会员价商品。</p>
	    		<p>钻石会员可享全部会员价商品。</p>
	    	</div> 
    	</div>
    	<div class="explainOne2">
    		<div class="explainOneTitle2">
    			<p>购物奖励</p>
    		</div>
			<div class="explainOneContent2">
				<p>对于支付金额大于或等于10元以上的商品/服务,成功下单并在线上完成支付可获得通币,支付金额越高,获得的通币越多。</p>
			</div>  
    	</div>   
    	<div class="explainOne3">
    		<div class="explainOneTitle3">
    			<p>评价奖励</p>
    		</div>
			<div class="explainOneContent3">
				<p>用户在三个月内对已完成服务的订单进行评价即可获得通币奖励回馈,有效评价越多,获得的通币越多。</p>
			</div>  
    	</div>  
    </div>    
    <!--经验值-->
    <div v-if="red2" class="explainTwo">
    	<div class="explainTwo1">
    		<div class="explainTwoTitle1">
    			<p>什么是经验值</p>
    		</div>
				<div class="explainTwoContent1">
					<p>经验值是车网通会员通过登录、下单消费、评价、分享APP内指定内容所获得的,累计的经验值总额觉定会员极别。</p>
				</div>  
    	</div> 
    	<div class="explainTwo2">
    		<div class="explainTwoTitle2">
    			<p>经验值如何获得?</p>
    		</div>
				<div class="explainTwoContent2">
					<p><span>登录:</span>&nbsp;每日第一次手动登录车网通后可获得5个经验值;</p>
		    		<p><span>下单消费:</span>&nbsp;即下单消费,按用户订单的实际支付金额计算,1元可获得一个经验值,10元获得10个经验值,以此类推无上限设定;</p>
		    		<p><span>消费奖励:</span>&nbsp;自然月内连续3天都进行了购物且订单状态为已完成的,次月3号左右发放100个经验值;</p>
		    		<p><span>订单评价:</span>&nbsp;订单完成后对订单进行评价可获得20个经验值;</p>
		    		<p><span>分享商品:</span>&nbsp;在app内通过微信分享商品/服务到朋友圈或发送给好友可获得2个经验值（每日第一次）;</p>
		    		<p><span>分享资讯:</span>&nbsp;在app内通过微信分享资讯/服务到朋友圈或发送给好友可获得2个经验值（每日第一次）;</p>
		    		<p><span>分享活动:</span>&nbsp;在app内通过微信分享活动/服务到朋友圈或发送给好友可获得2个经验值（每日第一次）;</p>
		    		<p><span>告诉朋友:</span>&nbsp;在app"我的"栏目内通过微信分享下载连接到朋友圈或发送给好友可获得10个经验值（每日第一次）;</p>
				</div>  
				<div class="explainTwoTitle3">
    			<p>哪些情况下会扣减经验值?</p>
    		</div>
    		<div class="explainTwoContent3">
					<p>1、您发表的商品/服务评价被删除,扣除的经验值与当时获得的值相同;</p>
					<p>2、退单,扣除的经验值与当时获得的值相同;</p>
				</div> 
    	</div>    
    </div>
    <!--通币介绍-->
    <div v-if="red3" class="explainThree">
    		<div class="explainThree1">
		    		<div class="explainThreeTitle1">
		    			<p>什么是通币</p>
		    		</div>
						<div class="explainThreeContent1">
							<p>
								1、通币是车网通用户在车网通平台（APP、WEB端）下单消费、订单评价等相关活动情况给予的优惠,通币仅可在车网通平台使用,如用户
								账号暂停使用,则车网通将取消该用户账号内通币相关使用权益。
							</p>
							<p>2、当通币直接用于支付车网通平台订单时,通币部分将视为折扣。通币和现金抵扣的比例为100:可使用通币数量为1000的整数倍,如
								1000、2000、3000等通币数。如拥有的通币数小于1000个,则不可在订单结算页使用通币。
							</p>
							<p>3、通币可用来兑换优惠券;通币也可用来抽奖。您可以在"我的"-"我的通币"中可查询到您的通币详细情况。</p>
							<p><span>通币有效期说明:</span>用户获得但未使用的通币,将在下一个月自然年底过期,车网通将定期对过期通币进行作废处理。
								例2016年12月31日将清空2015度客户获得但未使用的通币。
							</p>
						</div>  
						<div class="explainThree2">
			    		<div class="explainThreeTitle2">
			    			<p>如何获得通币</p>
			    		</div>
							<div class="explainThreeContent2">
								<p>一、下单消费</p>
								<p>
									实际支付金额大于10元时,即可享受通币奖励回馈,通币回馈值为实际支付金额的10%,如用户实际支付20元的咖啡类订单可获得2个通币、
									1000元的保养\车品\喷漆\违章订单可获得100个通币回馈;单个订单最高可获得1000个通币回馈,通币会在订单完成后回馈到用的个人中心。
								</p>								
								<p>1、订单完成是指:订单服务完成且未办理退款手续。通币会在订单完成后回馈到用户的个人中心。</p>
								<p>2、通币回馈的数量以订单完成支付时的金额和比例为准。</p>
								<p>二、订单评价</p>
								<p>
									会员评价获得通币的数量仅供参考:订单支付金额高于或等于10元时,用户在订单完成的3个月内对服务或商品进行有效评价将享受5-20个通币回馈。其中,
									订单支付金额大于等于10元小于等于100元,评价后回馈5个通币;订单支付金额大于等于100元小于等于500元,评价后回馈10个通币;订单支付金额大于等于
									500元小于等于1000元,评价后回馈15个通币;订单支付金额大于1000元,评价后回馈20个通币。
								</p>
								<p>1、您只能对在3个月内该用户名下购买的商品进行评价;</p>
								<p>2、无效评价不给与通币回馈;</p>
								<p>3、<span>无效评价包括:</span>使用过多标点和特殊符号的;评价内容存在恶意抹黑或没有任何参考价值的;评价内容违反法律、法规的。</p>								
							</div>  
							<div class="explainThreeTitle3">
			    			<p>如何使用通币</p>
			    		</div>
			    		<div class="explainThreeContent3">
			    			<p>1、在订单确认界面中选择"通币"输入通币数量,即可减免相应支付金额;</p>
			    			<p>2、可在用户中心,我的通币模块使用通币兑换等值的代金券、商品或服务。</p>
			    		</div>
			    		<div class="explainThreeTitle4">
			    			<p>通币在哪些情况下会被扣减?</p>
			    		</div>
			    		<div class="explainThreeContent4">
			    			<p>
			    				1、订单申请退款;在订单退款后需扣除该订单所获得的通币,如账户通币已使用,则自订单退款金额中扣除相应现金。如订单中享有其他优惠,
			    				则以其他优惠规则办理相应退还手续。
			    			</p>			    			
			    		</div>
    				</div> 
    		</div> 
    		
    </div>
  </div>
</template>
<script>
/*权益说明*/
import {XHeader} from 'vux';
import { setCookie, getCookie } from '../../util/commonUtils';
export default {
  name:"macaroniExplain",
  // 数据
  data(){

    return{
    	userId:'',
    	red1:true,//是否红色字体
    	red2:false,
    	red3:false,
    	isRed1:true,//是否红色下划线
    	isRed2:false,
    	isRed3:false,
    	
    }
  },
  // 计算属性
  computed:{

  },
  // 创建（实例创建完成）
  created(){
    this.userId=getCookie('loginkey');
  },
  // el被创建，并挂载到实例上
  mounted(){

  },
  // 方法（实例中的方法）-----------
  methods:{
    	//会员特权
    	changeone(){
    		this.red1 = true;
    		this.red2 = false;
    		this.red3 = false;
    		this.isRed1 = true;
    		this.isRed2 = false;
    		this.isRed3 = false;
    	},
    	//经验值
    	changetwo(){
    		this.red1 = false;
    		this.red2 = true;
    		this.red3 = false;
    		this.isRed1 = false;
    		this.isRed2 = true;
    		this.isRed3 = false;
    	},
    	//通币介绍
    	changethree(){
    		this.red1 = false;
    		this.red2 = false;
    		this.red3 = true;
    		this.isRed1 = false;
    		this.isRed2 = false;
    		this.isRed3 = true;
    	},
  },
  // 子组件
  components:{
    XHeader
  }
}
</script>
<!--当前页面的样式 -->
<style lang="less" scoped>
.macaroniExplain{
  	.macaroniExplainHeader{
  		display:flex;
  		height:0.8rem;
  		border-bottom:0.01rem solid #C9C9CF;
  		.explainPrivilege{
  			width:33.33%;
  			display:flex;
  			flex-flow:column;
  			justify-content:center;
  			position:relative;
  			p{
  				align-self:center;
  				font-size:0.26rem;
  			}
  			.red1{
  				color:#DD0E24;
  			}
  			.line1{
  				width:100%;
  				position:absolute;  				
  				bottom:0;
  				border:0.01rem solid #DD0E24;
  			}
  		}
  		.explainExperience{
  			width:33.34%;
  			display:flex;
  			flex-flow:column;
  			justify-content:center;
  			position:relative;
  			p{
  				align-self:center;
  				font-size:0.26rem;
  			}
  			.red2{
  				color:#DD0E24;
  			}
  			.line2{
  				width:100%;
  				position:absolute;  				
  				bottom:0;
  				border:0.01rem solid #DD0E24;
  			}
  		}
  		.explainIntroduce{
  			width:33.33%;
  			display:flex;
  			flex-flow:column;
  			justify-content:center;
  			position:relative;
  			p{
  				align-self:center;
  				font-size:0.26rem;
  			}
  			.red3{
  				color:#DD0E24;
  			}
  			.line3{
  				width:100%;
  				position:absolute;  				
  				bottom:0;
  				border:0.01rem solid #DD0E24;
  			}
  		}
  	}
  	
  	.explainOne{  		  		
  		min-height:11.36rem;  		
  		background:#ededed;  		  		
  		.explainOne1{
  			width:95%;
  			margin:0 auto;
  			height:2.75rem;
  			.explainOneTitle1{
	  			height:30%;
	  			display:flex;
	  			flex-flow:column;
	  			justify-content:center;
	  			p{
	  				font-size:0.34rem;
	  				font-weight:bold;  	
	  				text-align:left;		
	  				margin-left:0.4rem;	
	  			}
  			}
	  		.explainOneContent1{  			
	  			p{
	  				font-size:0.26rem;
	  				color:#8b8b8b;
	  				text-align:left;
	  				margin-left:0.4rem;
	  				margin-bottom:0.06rem;
	  			}
	  		}	  		
  		}
  		.explainOne2{
  			width:95%;
  			margin:0 auto;
  			height:2.4rem;
  			margin-top:0.4rem;
  			.explainOneTitle2{
  				height:30%;
	  			display:flex;
	  			flex-flow:column;
	  			justify-content:center;
  				p{
  					font-size:0.34rem;
	  				font-weight:bold;  	
	  				text-align:left;		
	  				margin-left:0.4rem;
  				}
  			}
  			.explainOneContent2{
  				p{
  					font-size:0.26rem;
	  				color:#8b8b8b;
	  				text-align:left;
	  				margin-left:0.4rem;
	  				margin-bottom:0.06rem;
  				}
  			}
  		}
  		.explainOne3{
  			width:95%;
  			margin:0 auto;
  			height:2.4rem;  	
  			margin-top:-0.5rem;		
  			.explainOneTitle3{
  				height:30%;
	  			display:flex;
	  			flex-flow:column;
	  			justify-content:center;
  				p{
  					font-size:0.34rem;
	  				font-weight:bold;  	
	  				text-align:left;		
	  				margin-left:0.4rem;
  				}
  			}
  			.explainOneContent3{
  				p{
  					font-size:0.26rem;
	  				color:#8b8b8b;
	  				text-align:left;
	  				margin-left:0.4rem;
	  				margin-bottom:0.06rem;
  				}
  			}
  		}
  	}
  	.explainTwo{
  		min-height:11.36rem;  	  	
  		background:#ededed; 
  		.explainTwo1{
  			width:95%;
  			margin:0 auto;
  			height:2.4rem;  	  			
  			.explainTwoTitle1{
  				height:30%;
	  			display:flex;
	  			flex-flow:column;
	  			justify-content:center;
  				p{
  					font-size:0.34rem;
	  				font-weight:bold;  	
	  				text-align:left;		
	  				margin-left:0.4rem;
  				}
  			}
  			.explainTwoContent1{
  				p{
  					font-size:0.26rem;
	  				color:#8b8b8b;
	  				text-align:left;
	  				margin-left:0.4rem;
	  				margin-bottom:0.06rem;
  				}
  			}
  		}
  		.explainTwo2{
  			width:95%;
  			margin:0 auto;
  			height:2.4rem;  
  			margin-top:-0.2rem;	  			
  			.explainTwoTitle2{
  				height:30%;
	  			display:flex;
	  			flex-flow:column;
	  			justify-content:center;
  				p{
  					font-size:0.34rem;
	  				font-weight:bold;  	
	  				text-align:left;		
	  				margin-left:0.4rem;
  				}
  			}
  			.explainTwoContent2{
  				p{
  					font-size:0.26rem;
	  				color:#8b8b8b;
	  				text-align:left;
	  				margin-left:0.4rem;
	  				margin-bottom:0.06rem;
	  				span{
	  					font-weight:bold;
	  					color:#000000;
	  				}
  				}
  			}
  			.explainTwoTitle3{
  				height:30%;
	  			display:flex;
	  			flex-flow:column;
	  			justify-content:center;
  				p{
  					font-size:0.34rem;
	  				font-weight:bold;  	
	  				text-align:left;		
	  				margin-left:0.4rem;
  				}
  			}
  			.explainTwoContent3{
  				p{
  					font-size:0.26rem;
	  				color:#8b8b8b;
	  				text-align:left;
	  				margin-left:0.4rem;
	  				margin-bottom:0.06rem;
	  				span{
	  					font-weight:bold;
	  					color:#000000;
	  				}
  				}
  			}
  		}  		  		  		  	
  	}
  	
  	.explainThree{
  		min-height:21rem;  	  	
  		background:#ededed; 
  		.explainThree1{
  			width:95%;
  			margin:0 auto;
  			height:5.15rem;  	  			
  			.explainThreeTitle1{
  				height:30%;
	  			display:flex;
	  			flex-flow:column;
	  			justify-content:center;
  				p{
  					font-size:0.34rem;
	  				font-weight:bold;  	
	  				text-align:left;		
	  				margin-left:0.4rem;
  				}
  			}
  			.explainThreeContent1{
  				p{
  					font-size:0.26rem;
	  				color:#8b8b8b;
	  				text-align:left;
	  				margin-left:0.4rem;
	  				margin-bottom:0.06rem;
	  				span{
	  					font-weight:bold;
	  					color:#000000;
	  				}
  				}
  			}
  		}
  		.explainThree2{
  			width:95%;
  			margin:0 auto;
  			height:2.4rem;  
  			margin-top:0.2rem;	 
  			margin-left:0rem; 			
  			.explainThreeTitle2{
  				height:30%;
	  			display:flex;
	  			flex-flow:column;
	  			justify-content:center;
  				p{
  					font-size:0.34rem;
	  				font-weight:bold;  	
	  				text-align:left;		
	  				margin-left:0.4rem;
  				}
  			}
  			.explainThreeContent2{
  				p{
  					font-size:0.26rem;
	  				color:#8b8b8b;
	  				text-align:left;
	  				margin-left:0.4rem;
	  				margin-bottom:0.06rem;
	  				span{
	  					font-weight:bold;
	  					color:#000000;
	  				}
  				}
  			}
  			.explainThreeTitle3{
  				height:30%;
	  			display:flex;
	  			flex-flow:column;
	  			justify-content:center;
  				p{
  					font-size:0.34rem;
	  				font-weight:bold;  	
	  				text-align:left;		
	  				margin-left:0.4rem;
  				}
  			}
  			.explainThreeContent3{
  				p{
  					font-size:0.26rem;
	  				color:#8b8b8b;
	  				text-align:left;
	  				margin-left:0.4rem;
	  				margin-bottom:0.06rem;
	  				span{
	  					font-weight:bold;
	  					color:#000000;
	  				}
  				}
  			}
  			.explainThreeTitle4{
  				height:30%;
	  			display:flex;
	  			flex-flow:column;
	  			justify-content:center;
  				p{
  					font-size:0.34rem;
	  				font-weight:bold;  	
	  				text-align:left;		
	  				margin-left:0.4rem;
  				}
  			}
  			.explainThreeContent4{
  				p{
  					font-size:0.26rem;
	  				color:#8b8b8b;
	  				text-align:left;
	  				margin-left:0.4rem;
	  				margin-bottom:0.06rem;
	  				span{
	  					font-weight:bold;
	  					color:#000000;
	  				}
  				}
  			}
  		}  		  		  		  	
  	}
}
</style>